PlayerFeatured.renderPlayerStats - Code Metrics - Inspection of "#93: Featured Player updates and test with propTyp..." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/93-optimize-scrutinize... ( a7e399...2e26c5 )

by Kevin Van

created 2020-03-22 10:45 UTC

PlayerFeatured.renderPlayerStats B

↳ Parent: PlayerFeatured

Complexity

Conditions

Size

Total Lines	56
Code Lines	50

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	50
dl	0
loc	56
rs	8.6363
c	0
b	0
f	0
cc	1

How to fix Long Method

import React, { Component } from "react"
import { Link } from "gatsby"
import { PropTypes } from "prop-types"

import { PlayerMinimal } from "./objects/player"

import "./player--featured.scss"

class PlayerFeatured extends Component {
  renderPlayerHeader = () => (
    <header className={"player--featured__header"}>
      <div className={"bg-green-mask--horizontal"}>
        <div
          className={"player--featured__bg-avatar"}
          style={{ backgroundImage: `url(${this.props.player.imageSrc})` }}
        />
        <div className={"bg-white-end"} />
      </div>
    </header>
  )
  renderPlayerStats = () => (
    <aside className={"player--featured__statistics"}>
      <section className={"player--featured__statistics-item"}>
        <div className={"player--featured__statistics-item__number"}>
          {this.props.player.gamesPlayed || "0"}
        </div>
        <div className={"player--featured__statistics-item__label"}>
          Wedstrijden
        </div>
      </section>

      {this.props.player.position === "k" && (
        <section className={"player--featured__statistics-item"}>
          <div className={"player--featured__statistics-item__number"}>
            {this.props.player.cleanSheets || "0"}
          </div>
          <div className={"player--featured__statistics-item__label"}>
            Cleansheets
          </div>
        </section>
      )}
      {this.props.player.position !== "k" && (
        <section className={"player--featured__statistics-item"}>
          <div className={"player--featured__statistics-item__number"}>
            {this.props.player.goalsScored || "0"}
          </div>
          <div className={"player--featured__statistics-item__label"}>
            Doelpunten
          </div>
        </section>
      )}
      <section
        className={
          "player--featured__statistics-item player--featured__statistics-item--cards"
        }
      >
        <div className={"player--featured__statistics-item__number"}>
          {this.props.player.cardsYellow || "0"}
        </div>
        <div className={"player--featured__statistics-item__label"}>
          <span className={"stats__card stats__card--yellow"}></span>
        </div>
      </section>
      <section
        className={
          "player--featured__statistics-item player--featured__statistics-item--cards"
        }
      >
        <div className={"player--featured__statistics-item__number"}>
          {this.props.player.cardsRed || "0"}
        </div>
        <div className={"player--featured__statistics-item__label"}>
          <span className={"stats__card stats__card--red"}></span>
        </div>
      </section>
    </aside>
  )
  renderPlayerLink = () => (
    <footer className={"player--featured__footer"}>
      <Link to={this.props.player.link} className="rich-link">
        Meer over {this.props.player.nameFirst} &raquo;
      </Link>
    </footer>
  )
  renderPlayerName = () => (
    <div className={"player--featured__name__wrapper"}>
      <h1 className={"player--featured__name"}>
        <span className={"player--featured__name-first"}>
          {this.props.player.nameFirst || "John"}
        </span>
        <span className={"player--featured__name-last"}>
          {this.props.player.nameLast || "Doe"}
        </span>
      </h1>
      <div className={"player--featured__bg-shirt-number"} aria-hidden="true">
        {this.props.player.shirtNr || "0"}
      </div>
    </div>
  )
  render() {
    return (
      <article className={"player--featured"}>
        {this.renderPlayerHeader()}
        <section className={"player--featured__content"}>
          {this.renderPlayerName()}
          {this.renderPlayerStats()}
          {this.props.player.link && this.renderPlayerLink()}
        </section>
      </article>
    )
  }
}

PlayerFeatured.propTypes = {
  player: PropTypes.instanceOf(PlayerMinimal).isRequired,
}

export default PlayerFeatured


1			import React, { Component } from "react"
2			import { Link } from "gatsby"
3			import { PropTypes } from "prop-types"
4
5			import { PlayerMinimal } from "./objects/player"
6
7			import "./player--featured.scss"
8
9			class PlayerFeatured extends Component {
10			renderPlayerHeader = () => (
11			<header className={"player--featured__header"}>
12			<div className={"bg-green-mask--horizontal"}>
13			<div
14			className={"player--featured__bg-avatar"}
15			style={{ backgroundImage: `url(${this.props.player.imageSrc})` }}
16			/>
17			<div className={"bg-white-end"} />
18			</div>
19			</header>
20			)
21			renderPlayerStats = () => (
22			<aside className={"player--featured__statistics"}>
23			<section className={"player--featured__statistics-item"}>
24			<div className={"player--featured__statistics-item__number"}>
25			{this.props.player.gamesPlayed \|\| "0"}
26			</div>
27			<div className={"player--featured__statistics-item__label"}>
28			Wedstrijden
29			</div>
30			</section>
31
32			{this.props.player.position === "k" && (
33			<section className={"player--featured__statistics-item"}>
34			<div className={"player--featured__statistics-item__number"}>
35			{this.props.player.cleanSheets \|\| "0"}
36			</div>
37			<div className={"player--featured__statistics-item__label"}>
38			Cleansheets
39			</div>
40			</section>
41			)}
42			{this.props.player.position !== "k" && (
43			<section className={"player--featured__statistics-item"}>
44			<div className={"player--featured__statistics-item__number"}>
45			{this.props.player.goalsScored \|\| "0"}
46			</div>
47			<div className={"player--featured__statistics-item__label"}>
48			Doelpunten
49			</div>
50			</section>
51			)}
52			<section
53			className={
54			"player--featured__statistics-item player--featured__statistics-item--cards"
55			}
56			>
57			<div className={"player--featured__statistics-item__number"}>
58			{this.props.player.cardsYellow \|\| "0"}
59			</div>
60			<div className={"player--featured__statistics-item__label"}>
61			<span className={"stats__card stats__card--yellow"}></span>
62			</div>
63			</section>
64			<section
65			className={
66			"player--featured__statistics-item player--featured__statistics-item--cards"
67			}
68			>
69			<div className={"player--featured__statistics-item__number"}>
70			{this.props.player.cardsRed \|\| "0"}
71			</div>
72			<div className={"player--featured__statistics-item__label"}>
73			<span className={"stats__card stats__card--red"}></span>
74			</div>
75			</section>
76			</aside>
77			)
78			renderPlayerLink = () => (
79			<footer className={"player--featured__footer"}>
80			<Link to={this.props.player.link} className="rich-link">
81			Meer over {this.props.player.nameFirst} »
82			</Link>
83			</footer>
84			)
85			renderPlayerName = () => (
86			<div className={"player--featured__name__wrapper"}>
87			<h1 className={"player--featured__name"}>
88			<span className={"player--featured__name-first"}>
89			{this.props.player.nameFirst \|\| "John"}
90			</span>
91			<span className={"player--featured__name-last"}>
92			{this.props.player.nameLast \|\| "Doe"}
93			</span>
94			</h1>
95			<div className={"player--featured__bg-shirt-number"} aria-hidden="true">
96			{this.props.player.shirtNr \|\| "0"}
97			</div>
98			</div>
99			)
100			render() {
101			return (
102			<article className={"player--featured"}>
103			{this.renderPlayerHeader()}
104			<section className={"player--featured__content"}>
105			{this.renderPlayerName()}
106			{this.renderPlayerStats()}
107			{this.props.player.link && this.renderPlayerLink()}
108			</section>
109			</article>
110			)
111			}
112			}
113
114			PlayerFeatured.propTypes = {
115			player: PropTypes.instanceOf(PlayerMinimal).isRequired,
116			}
117
118			export default PlayerFeatured
119

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/93-optimize-scrutinize... ( a7e399...2e26c5 )

PlayerFeatured.renderPlayerStats B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like